<template>
  <!-- 验车订单详情 -->
  <div class="box ">
    <h1>验车订单详情</h1>
    <hr>
    <div class="main clear">
      <div class="left">
        <div class="left-1">
          订单编号:
          <div>
            <div>{{ data.number }}</div>
          </div>
          <div>
            订单类型:
            <div>{{ data.orderType.orderType }}</div>
          </div>
          <div>
            下单时间：
            <div> {{ data.createTime }}</div>
          </div>
        </div>
        <div class="left-2">
          <!-- 接车司机 -->
          <div class="selectStyleDiv">
            接车司机:
            <div class="selectStyleDiv clear">
              <el-select v-model="driverArea" placeholder="选择区域" class="selectStyle" @change="driverChange(driverArea)">
                <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
                </el-option>
              </el-select>

              <el-select v-model="getDriver" placeholder="接车司机" class="selectStyle">
                <el-option v-for="item in getDriverData" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 还车司机 -->
          <div>
            还车司机:
            <div class="selectStyleDiv clear">
              <el-select v-model="reDriverArea" placeholder="选择区域" class="selectStyle"
                @change="driverChange(reDriverArea)">
                <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
                </el-option>
              </el-select>

              <el-select v-model="reDriver" placeholder="还车司机" class="selectStyle">
                <el-option v-for="item in reDriverData" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>
          <div>
            检测场:
            <div class="Bottom15px clear">
              <el-select v-model="inspectArea" placeholder="选择区域" class="selectStyle"
                @change="checkChange(inspectArea)">
                <el-option v-for="item in areaData" :key="item.id" :label="item.area" :value="item.area">
                </el-option>
              </el-select>
              <el-select v-model="inspectPlace" placeholder="请选择检测场" class="selectStyle">
                <el-option v-for="item in inspectNameData" :key="item.id" :label="item.name" :value="item.name">
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div>
          派工单位:
          <div>
            <el-input v-model="workCompany" placeholder="请输入公司名称" class="input2"></el-input>
          </div>
        </div>
        <div>
          订单状态:
          <div>
            <el-select v-model="orderStatus" class="input2" @change="orderStatusChange(orderStatus)">
              <el-option v-for="item in getStatusData" :key="item.id" :label="item.orderStatus"
                :value="item.orderStatus">
              </el-option>
            </el-select>
          </div>
        </div>
        <div>
          接车时间:
          <div>
            <el-input v-model="getCarTime" placeholder="请输入接车时间" class="input2"></el-input>
          </div>
        </div>
        <div>
          车牌号:
          <div>
            <el-input v-model="carId" placeholder="请输入车牌号" class="input2"></el-input>
          </div>
        </div>
        <div>
          接车地址:
          <div>
            <el-input v-model="receiveP" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>

      </div>


      <div class="middle">
        <div>
          是否需要赔款:
          <div class="Bottom15px">
            <el-radio v-model="radio" label="1">是</el-radio>
          </div>
        </div>
        <div>
          是否发送短信:
          <div class="Bottom15px">
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="2">否</el-radio>
          </div>
        </div>
        <div>
          还车地点:
          <div>
            <el-input v-model="returnP" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>

        <div>
          客户备注:
          <div>
            <el-input v-model="tip" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>
        <div class="Bottom15px">
          特定事项:
          <div>
            <el-input v-model="attention" class="Bottom15px input2"></el-input>
          </div>
        </div>

        短信内容:
        <div class="Bottom15px">
          <el-input type="textarea" :rows="4" class="textarea1" v-model="cusMessage">
          </el-input>
        </div>
        <div class="clear">
          <div class="message-left">短信操作:</div>
          <div class="message-right">已发送0次</div>
        </div>
        <div class="Bottom15px clear">
          <el-button type="primary" class="message-left">生成短信</el-button>
          <el-button type="primary" class="message-right">发送给用户</el-button>
        </div>
        <div>
          短信内容:
          <div class="Bottom15px">
            <el-input type="textarea" :rows="4" class="textarea1" v-model="cusMessage">
            </el-input>
          </div>
          <div class="clear">
            <div class="message-left">短信操作:</div>
            <div class="message-right">已发送0次</div>
          </div>
          <div class="Bottom15px clear">
            <el-button type="primary" class="message-left">生成短信</el-button>
            <el-button type="primary" class="message-right">发送给司机</el-button>
          </div>
        </div>

      </div>

      <div class="right">
        <div>
          发动机编号:
          <div>
            <el-input v-model="engineNumber" placeholder="请输入发动机编号" class="input2"></el-input>
          </div>
        </div>
        <div>
          联系人:
          <div>
            <el-input v-model="contactPerson" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>
        <div>
          联系电话:
          <div>
            <el-input v-model="contactPhone" placeholder="请输入内容" class="input2"></el-input>
          </div>
        </div>

        <div>
          登记人:
          <div>
            <el-input v-model="registerP" placeholder="请输入登记人" class="input2"></el-input>
          </div>
        </div>
        <div>
          <div>预计还车时间:</div>
          <el-input v-model="returnTime" class="input2"></el-input>
          <div>拍照内容说明:</div>
          <el-input v-model="pictureDesc" class="input2"></el-input>
          <div>图片附件</div>
          <img src="" alt="" />
        </div>
        <div class="right-1">
          <ul class="pay1">
            <li>支付单号:</li>
            <li>data</li>
            <li>支付方式:</li>
            <li>微信支付/支付宝/xx银行</li>
          </ul>
          <ul class="pay">
            <li>支付状态</li>
            <li>{{ orderStatus }}</li>
            <li>在线支付金额</li>
            <li>0.00元data</li>
            <li>优惠券付款</li>
            <li>0元data</li>
          </ul>
          <ul class="pay">
            <li>订单总金额</li>
            <li>199data</li>
            <li>积分付款</li>
            <li>0.00元data</li>
            <li>客服应付金额</li>
            <li>0元data</li>
          </ul>
        </div>



      </div>
    </div>
    <div class="save">
      <el-button type="primary" class="saveBtn" @click="
        orderAdd(
          number,
          getDriver,
          reDriver,
          orderStatus,
          workCompany,
          carId,
          inspectPlace,
          isMakeCompemsation,
          isSendMessage,
          attention,
          cusMessage,
          driMessage,
          messageOperate,
          getCarTime,
          engineNumber,
          contactPerson,
          contactPhone,
          registerP,
          receiveP,
          returnP,
          receiveMap,
          returnMap,
          tip,
          returnTime,
          pictureDesc,
          attachmentImg
        )
      ">保存</el-button>
      <el-button type="primary" @click="cancel" class="cancelBtn">取消</el-button>
    </div>
  </div>
</template>
    

<script>
export default {
  created() {
    this.selectAll();
    console.log("路由传参", this.$route.params);
    this.selectOrderDetail(
      this.$route.params.data.number,
      this.$route.params.data.orderType.orderType
    );
    this.getStatus();
  },
  data() {
    return {
      //路由传参数据
      data: this.$route.params.data,
      // 通过订单号及类型查询信息
      orderInfo: "",
      order: "",
      orderDetail: "",
      //传到后台的的数据
      //订单号
      number: "",
      //接车司机
      //区域公用数据
      areaData: [],
      driverArea: "",
      reDriverArea: "",
      //接车司机
      getDriverData: [],
      getDriver: null,
      //还车司机
      reDriverData: [],

      reDriver: "",
      //支付状态、
      orderStatus: "",
      //派工单位
      workCompany: "",
      //车牌号
      carId: "",
      //修理厂公司,暂无数据

      // 检测场区域数据
      inspectArea: "",
      //检测场数据
      inspectPlace: "",
      inspectNameData: [],
      //不知道是啥
      isMakeCompemsation: true,
      //是否发送消息 未作绑定
      isSendMessage: true,
      //客户短信信息
      cusMessage: "",
      //司机短信信息
      driMessage: "",
      //不知道时啥数据  消息操作
      messageOperate: "2", //需要绑定
      //接车时间
      getCarTime: "",
      //发动机编号
      engineNumber: "",
      //联系人及其电话
      contactPerson: "",
      contactPhone: "",
      //特定事项
      attention: "",
      //登记人
      registerP: "",
      //接车地址
      receiveP: "",
      //还车地点
      returnP: "",
      //地图内容暂未做
      receiveMap: "5466.235,54489.23",
      returnMap: "36644.136,64455",
      //客户备注
      tip: "",
      //还车时间
      returnTime: "",
      //拍照内容说明
      pictureDesc: "",
      //图片附件
      attachmentImg: "/asjflak.jsp,/kjashfa.jpg",
      radio: "1",
      input: "",
      // 订单状态  下拉框
      getStatusData: "",
    };
  },
  methods: {
    //取消按钮
    cancel() {
      this.$router.push('/order')
    },
    //赋值函数
    fuZhi() {
      //请求后端的数据 赋值给当前页面
      (this.order = this.data.number),
        // this.orderDetail= this.data.orderType.orderType,
        //传送后端的数据
        (this.number = this.data.number);
      // this.driverArea =
      this.getDriver = this.data.diver;
      this.reDriver = this.orderInfo.returnDriver;
      this.orderStatus = this.data.status.orderStatus;
      this.inspectArea = this.orderDetail.inspectPlace.area;
      this.inspectPlace = this.orderDetail.inspectPlace.name;
      this.attention = this.orderDetail.attention;
      this.cusMessage = this.orderDetail.messageContent;
      this.driMessage = this.orderDetail.messageDri;
      this.getCarTime = this.orderDetail.getCarTime;
      this.engineNumber = this.orderDetail.engineNumber;
      this.contactPerson = this.orderDetail.contactPerson;
      this.contactPhone = this.orderDetail.contactPhone;
      this.registerP = this.orderDetail.registerPerson;
      this.receiveP = this.orderDetail.receivePosition;
      this.returnP = this.orderDetail.registerPerson;
      //地图行程暂未做
      //this.receiveMap = this.orderDetail.receiveMap;
      //this.returnMap = this.orderDetail.returnMap;
      this.tip = this.orderDetail.tips;
      this.returnTime = this.orderDetail.returnTime;
      this.pictureDesc = this.orderDetail.pictureDesc;

      this.workCompany = this.data.workCompany;
      this.carId = this.data.carId;
      this.driverArea = this.data.driverArea;
      this.reDriverArea = this.orderInfo.returnArea
      // orderInfo,orderDetail
      // this.createTime = this.data.
    },

    //保存验车订单
    orderAdd(
      number,
      getDriver,
      reDriver,
      orderStatus,
      workCompany,
      carId,
      inspectPlace,
      isMakeCompemsation,
      isSendMessage,
      attention,
      cusMessage,
      driMessage,
      messageOperate,
      getCarTime,
      engineNumber,
      contactPerson,
      contactPhone,
      registerP,
      receiveP,
      returnP,
      receiveMap,
      returnMap,
      tip,
      returnTime,
      pictureDesc,
      attachmentImg
    ) {
      this.$http({
        url: "/order/updateInspect",
        method: "POST",
        data: {
          number,
          getDriver,
          reDriver,
          orderStatus,
          workCompany,
          carId,
          inspectPlace,
          isMakeCompemsation,
          isSendMessage,
          attention,
          cusMessage,
          driMessage,
          messageOperate,
          getCarTime,
          engineNumber,
          contactPerson,
          contactPhone,
          registerP,
          receiveP,
          returnP,
          receiveMap,
          returnMap,
          tip,
          returnTime,
          pictureDesc,
          attachmentImg,
        },
      })
        .then((res) => {
          console.log("验车订单修改成功", res);
        })
        .catch((err) => {
          console.log("验车订单修改失败", err);
        })
      this.$router.push('/order');
    },

    // 查询所有区域
    selectAll() {
      this.$http({
        url: "/area/selectAll",
        method: "POST",
      })
        .then((res) => {
          console.log("查询所有区域数据成功", res.data.data);
          this.areaData = res.data.data;
        })
        .catch((err) => {
          console.log("查询所有区域获取失败", err);
        });
    },
    // 联动区域查询司机
    selectDriver(areaName) {
      this.$http({
        url: "/area/selectDriver",
        method: "GET",
        params: {
          areaName,
        },
      })
        .then((res) => {
          console.log("联动区域查询司机数据成功", res.data.data[0]);

          this.getDriverData = res.data.data[0];
          this.reDriverData = res.data.data[0];
        })
        .catch((err) => {
          console.log("联动区域查询司机失败", err);
        });
    },
    driverChange(areaName) {
      // item.area
      console.log("传入的值", areaName);
      this.selectDriver(areaName);
    },
    //联动区域查询此区域的修理厂
    selectRepairF(areaName) {
      this.$http({
        url: "/area/selectRepairF",
        method: "GET",
        params: {
          areaName,
        },
      })
        .then((res) => {
          console.log("联动区域查询此区域的修理厂数据成功", res.data.data[0]);
          this.inspectNameData = res.data.data[0];
        })
        .catch((err) => {
          console.log("联动区域查询此区域的修理厂失败", err);
        });
    },
    checkChange(inspectArea) {
      this.selectRepairF(inspectArea);
    },
    //点击订单编号跳转页面
    selectOrderDetail(number, type) {
      console.log("传入的编号类型", number, type);
      this.$http({
        url: "/order/selectOrderDetail",
        method: "POST",
        data: {
          number,
          type,
        },
      })
        .then((res) => {
          this.orderInfo = res.data.order;
          this.orderDetail = res.data.orderDetail;
          this.fuZhi();
          console.log("新页面", res.data);
          console.log("新页面order", this.orderInfo);
          console.log("新页面detail", this.orderDetail);
        })
        .catch((err) => {
          console.log("跳转订单失败", err);
        });
    },
    // 下拉选择框，获取订单状态
    getStatus() {
      this.$http({
        url: "/order/getStatus",
        method: "GET",
      })
        .then((res) => {
          console.log("订单状态数据", res.data);
          this.getStatusData = res.data.data;
        })
        .catch((err) => {
          console.log("订单状态获取失败", err);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  min-width: 1200px;
  height: 1000px;

  h1 {
    font-size: 30px;
  }

  hr {
    margin: 20px 0 20px 0;
    border-top: 2px solid rgba(128, 128, 128, 0.753);
  }


  .main {
    margin: 0 auto;
    width: 1200px;

    .left {
      min-width: 300px;
      // margin-left: 20px;
      float: left;

      .selectStyleDiv {
        margin: 15px 0px 20px 0;
      }

      .left-1 {
        // margin-top: 10px;
        min-width: 300px;

        div {
          margin-top: 10px;
        }
      }
    }

    .middle {
      min-width: 300px;
      margin-left: 150px;
      float: left;

      .message-left {
        float: left;
      }

      .message-right {
        float: right;
      }

    }

    .right {
      float: left;
      // margin-right: 40px;
      margin-left: 150px;
      min-width: 260px;
    }
  }

  .Bottom15px {
    margin: 15px 0px 15px 0;
  }

  .selectStyle {
    float: left;
    margin-right: 20px;
    width: 120px;
  }

  .input2 {
    width: 260px;
    margin: 15px 0px 15px 0;
  }

  .textarea1 {
    width: 260;
    height: 100px;
  }



  .pay {
    float: left;
  }

  .pay li,
  .pay1 li {
    margin: 10px 10px 10px 10px;
  }

  .right-1 {
    height: 400px;
  }
}

.save {
  text-align: center;
  padding: 30px 0;

  .saveBtn {
    margin-right: 50px;
    margin-left: -50px;
  }

  .cancelBtn {
    margin-left: 50px;
  }

}
</style>